﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery EasyUI</title>
  <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>

    <style type="text/css">
        .drag-item { list-style-type: none; display: block; padding: 5px; border: 1px solid #ccc; margin: 2px; width: 300px; background: #fafafa; }
        .indicator { position: absolute; font-size: 9px; width: 10px; height: 10px; display: none; color: red; }
    </style>

    <script>
		$(function(){
			var indicator = $('<div class="indicator">>></div>').appendTo('body');
			$('.drag-item').draggable({
				revert:true,
				deltaX:0,
				deltaY:0
			}).droppable({
				onDragOver:function(e,source){
					indicator.css({
						display:'block',
						top:$(this).offset().top+$(this).outerHeight()-5
					});
				},
				onDragLeave:function(e,source){
					indicator.hide();
				},
				onDrop:function(e,source){
					$(source).insertAfter(this);
					indicator.hide();
				}
			});
		});
    </script>

</head>
<body>
    <h1>
        DragDrop</h1>
    <ul style="margin: 0; padding: 0; margin-left: 10px;">
        <li class="drag-item">Drag 1</li>
        <li class="drag-item">Drag 2</li>
        <li class="drag-item">Drag 3</li>
        <li class="drag-item">Drag 4</li>
        <li class="drag-item">Drag 5</li>
        <li class="drag-item">Drag 6</li>
    </ul>
</body>
</html>
